<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
    <th:block th:include="include :: header('新增项目六定记录')" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=UGs0zD0LOWxTv6AVYl6UAtyPMUMZjkwG "></script>
</head>
<body class="white-bg">
    <div class="row" style="margin:5px 10px 5px 10px;width:600px;">
        <input id="washaddress" ><button onclick="search()">搜索</button>
    </div>
    <div class="row" style="margin:5px 10px 5px 10px;width:600px;">
        经度：<input id="longitude" name="longitude" readonly="readonly" style="width: 80px"/>
        纬度：<input id="latitude" name="latitude" readonly="readonly" style="width: 80px"/>
    </div>

    <div class="row" id="container" style="position:absolute;margin:10px 10px 10px 10px;width:600px;height:520px;overflow:hidden;"></div>



    <th:block th:include="include :: footer" />
    <script th:inline="javascript">
        var prefix = ctx + "manage/sixDone"
        $("#form-sixDone-add").validate({
            focusCleanup: true
        });

        function submitHandler() {
            //调用给父节容器赋值
            var longitude = $("input[name='longitude']").val();
            var latitude = $("input[name='longitude']").val();
        };

        var map=new BMap.Map("container");
        map.centerAndZoom("太原",12);//定义默认显示中心区域和显示比例
        map.enableScrollWheelZoom();//打开滚轮缩放功能
        map.enableContinuousZoom();//打开拖动功能
        var localsearch=new BMap.LocalSearch(map);//定义本地搜索变量
        localsearch.enableAutoViewport();

        map.addEventListener("click",function(poi){
            map.clearOverlays();//清除之前地图的标记
            var marker = new BMap.Marker(new BMap.Point(poi.point.lng,poi.point.lat));//制作新的地图标记
            map.addOverlay(marker);//显示标记
            document.getElementById("longitude").value = poi.point.lng;//拿到点的经度
            document.getElementById("latitude").value = poi.point.lat;//拿到点的纬度
//            prompt("鼠标单击地方的经纬度为：",e.point.lng + "," + e.point.lat);
        });

        function search(){
            map.clearOverlays();//清除之前地图的标记
            var keyword=document.getElementById("washaddress").value;//拿到搜索关键字
            localsearch.setSearchCompleteCallback(function (searchresult){//定义搜索完成回调方法
                var poi=searchresult.getPoi(0);//拿到搜索结果的点，备注：当前只获取了搜索的第一个，其实搜索结果有很多个，这里忽略处理！
                document.getElementById("longitude").value = poi.point.lng;//拿到点的经度
                document.getElementById("latitude").value = poi.point.lat;//拿到点的纬度
                map.centerAndZoom(poi.point, 13);//将地图中心显示为搜索的店
                var marker = new BMap.Marker(new BMap.Point(poi.point.lng,poi.point.lat));//制作新的地图标记
                map.addOverlay(marker);//显示标记
            });
            localsearch.search(keyword);//search进行检索
        }
    </script>
</body>
</html>